<template>
  <div class="timer-container">
    <div
      class="semicircle"
      :class="{ left: lessThanFive, right: !lessThanFive}"
      :style="leftStyle"
    >
    </div>
    <div
      class="semicircle right"
      :style="rightStyle"
    >
    </div>
    <div
      class="text"
      :class="{ msg: text === 0 }"
    >
      {{ text === 0 ? '未作答' : text }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'CountdownTimer',
  props: {
    rotateDeg: {
      type: Number,
      default: 0
    },
    text: Number
  },
  computed: {
    lessThanFive() {
      return this.rotateDeg < 180;
    },
    rightStyle() {
      return {
        transform: `rotate(${this.rotateDeg}deg)`
      };
    },
    leftStyle() {
      return {
        backgroundColor: this.lessThanFive ? '#fff' : '#5cc7e4',
        zIndex: 1
      };
    }
  }
};
</script>

<style lang="scss" scoped src="./style.scss"></style>
